<template>
  <kinesis-container
    ><div class="login-wrap">
      <kinesis-element :parallaxStrength="4" :type="parallax">
        <div class="login-box">
          <div class="title">登录</div>
          <div class="form-box">
            <el-form
              label-position="left"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="手机号" prop="phone" label-width="70px">
                <el-input
                  :clearable="true"
                  type="text"
                  v-model="ruleForm.phone"
                  autocomplete="on"
                  prefix-icon="el-icon-mobile-phone"
                  placeholder="请输入网易云手机号"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" label-width="70px">
                <el-input
                  :clearable="true"
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="on"
                  prefix-icon="el-icon-lock"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >登录</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </kinesis-element>
      <ch-vcode
        :imgs="images"
        :show="isShow"
        @success="success"
        @close="close"
      />
    </div>
  </kinesis-container>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
import { KinesisContainer, KinesisElement } from "vue-kinesis";
import axios from "axios";
import { Login } from "@/api/login";
export default {
  name: "LoginIndex",
  components: {
    KinesisContainer,
    KinesisElement,
    "ch-vcode": Vcode
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      isShow: false,
      images: [],
      parallax: "depth",
      ruleForm: {
        phone: "",
        password: ""
      },
      rules: {
        phone: [{ required: true, message: "手机号都没有！", trigger: "blur" }],
        password: [{ required: true, message: "密码呢！", trigger: "blur" }]
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getimg();
  },
  mounted() {},
  methods: {
    async getimg() {
      const data = await axios({
        method: "get",
        url: "https://picsum.photos/v2/list"
      });
      data.data.forEach(val => {
        this.images.push(val.download_url);
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isShow = true;
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async success() {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
      const data = await Login({
        phone: this.ruleForm.phone,
        password: this.ruleForm.password
      });
      if (data.data.code == 200) {
        this.$store.commit("handleUser", data.data);
        this.$router.push("/");
        this.$message({
          message: data.data.msg,
          type: "success"
        });
      } else {
        this.$message.error(data.data.message);
        // console.log(data);
      }
      // console.log(data);
    },
    close() {
      this.isShow = false;
    }
  }
};
</script>

<style scoped lang="scss">
.login-wrap {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/login-bg.jpg") no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  .login-box {
    width: 350px;
    height: 300px;
    background: rgba($color: #fff, $alpha: 0.5);
    border-radius: 5px;
    box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.3);
    padding: 0 20px;
    box-sizing: border-box;
    .title {
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 30px;
      color: #000;
    }
  }
}
/eep/.el-form {
  .el-form-item__label {
    width: 70px;
  }
}
</style>
